<template>
	<!-- 搜索页面 -->
	<div id="search" class="search">
		<Header></Header>
		<!--本来应该是导航，（方便全局替换）-->
		<!-- <HHeader></HHeader> -->
		<div class="searchCont">
			<div class="searchCont_cluster">
				<div class="searchCont_cluster_Left">
					<div class="academicCont_cluster_ContB">
						<ul class="searchCont_cluster_left_nav">
							<li :class="{searchcode:searchcode===1}" @click="getTableData('issue',1)">学术论文</li>
							<li :class="{searchcode:searchcode===2}" @click="getTableData('news',2,'3623')">最新动态</li>
							<li :class="{searchcode:searchcode===3}" @click="getTableData('news',3,'3626')">最新研究</li>
							<li :class="{searchcode:searchcode===4}" @click="getTableData('meeting',4)">会议培训</li>

						</ul>
					</div>
					<div v-show="searchcode === 1">
						<ul v-if="!acadecontList" class="zwData">
							<div class="zwIcon">
								<i class="iconfont icon-wusousuojieguo"></i>
							</div>
							<div class="zwSpan">
								<p>抱歉，暂时没有找到相关内容</p>
								<p>建议您检查关键词后，重新输入</p>
							</div>
						</ul>
						<ul class="searchCont_cluster_left_academic" v-else>
							<li v-for="(item, index) in acadecontList" :key="index"
								:class="{ acadecontNav: acadecontNav === index }" @click="acadecontNav = index">
								<div class="acadecont_title">
									<p>
										<a @click="loogin(item.ContentId)">{{ item.Title }}</a>
									</p>
									<p style="margin-top: 10px; color: #8b8b8b; font-size: 14px">
										{{ item.Authors }}
									</p>
								</div>
								<div class="acadecont_author">{{ item.author }}</div>
								<div class="acadecont_title_right">
									<!-- <div v-for="(itemc,index) in item.KeyWords.split(';')" :key="index">{{itemc}}</div> -->
									<div v-for="(itemc, index) in item.KeyWords.split(';')" :key="index">
										{{ itemc }}
									</div>
								</div>
								<div class="acadecont_open_zy">摘要</div>
								<p class="acadecont_cont" style="
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                            ">
									{{ item.Abstract }}
								</p>
								<div class="acadecont_bottom">
									<div class="acadecont_bottom_left">
										<span>{{ item.AddDate.substr(0, 10) }}</span>
										<span>{{ item.organization }}</span>
									</div>
									<!-- <div class="acadecont_bottom_right">
                              <div>下载</div>
                              <div>查看</div>
                            </div>-->
								</div>
							</li>
							<pagepagination :total="page.total" :pageSize="page.pageSize"
								:currentPage="page.currentPage" @change="change" :numAround="true"></pagepagination>
						</ul>
						<div style="clear: both"></div>
					</div>
					<div v-show="searchcode === 2">
						<ul v-if="!periodiContList" class="zwData">
							<div class="zwIcon">
								<i class="iconfont icon-wusousuojieguo"></i>
							</div>
							<div class="zwSpan">
								<p>抱歉，暂时没有找到相关内容</p>
								<p>建议您检查关键词后，重新输入</p>
							</div>
						</ul>
						<ul class="searchCont_cluster_left_academic" v-else>
							<li v-for="(item, index) in meetContList" :key="index"
								:class="{ acadecontNav: acadecontNav === index }" @click="acadecontNav = index">
								<div class="acadecont_title">
									<p>
										<a @click="loogin(item.ContentId)">{{ item.Title }}</a>
									</p>
									<p style="margin-top: 10px; color: #8b8b8b; font-size: 14px">
										{{ item.Authors }}
									</p>
								</div>
								<div class="acadecont_author">{{ item.author }}</div>
								<!-- <div class="acadecont_title_right">
                            <div
                              v-for="(itemc, index) in item.KeyWords"
                              :key="index"
                            >
                              {{ itemc }}
                            </div>
                          </div> -->
								<div class="acadecont_open_zy">摘要</div>
								<p class="acadecont_cont" style="
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                            ">
									{{ item.Abstract }}
								</p>
								<div class="acadecont_bottom">
									<div class="acadecont_bottom_left">
										<span>{{ item.AddDate.substr(0, 10) }}</span>
										<span>{{ item.organization }}</span>
									</div>
									<!-- <div class="acadecont_bottom_right">
                              <div>下载</div>
                              <div>查看</div>
                            </div>-->
								</div>
							</li>
							<pagepagination :total="page.total" :pageSize="page.pageSize"
								:currentPage="page.currentPage" @change="change" :numAround="true"></pagepagination>
						</ul>
						<div style="clear: both"></div>
					</div>
					<div v-show="searchcode === 3">
						<ul v-if="!meetContList" class="zwData">
							<div class="zwIcon">
								<i class="iconfont icon-wusousuojieguo"></i>
							</div>
							<div class="zwSpan">
								<p>抱歉，暂时没有找到相关内容</p>
								<p>建议您检查关键词后，重新输入</p>
							</div>
						</ul>
						<ul class="searchCont_cluster_left_academic" v-else>
							<li v-for="(item, index) in meetContList" :key="index"
								:class="{ acadecontNav: acadecontNav === index }" @click="acadecontNav = index">
								<div class="acadecont_title">
									<p>
										<a @click="loogin(item.ContentId)" v-html="item.Title"></a>
									</p>
									<p style="margin-top: 10px; color: #8b8b8b; font-size: 14px">
										{{ item.Authors }}
									</p>
								</div>
								<div class="acadecont_author">{{ item.author }}</div>
								<!-- <div class="acadecont_title_right"> -->
								<!-- <div
                              v-for="(itemc, index) in item.KeyWords"
                              :key="index"
                            >
                              {{ itemc }}
                            </div> -->
								<!-- </div> -->
								<div class="acadecont_open_zy">摘要</div>
								<p class="acadecont_cont" style="
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                            ">
									{{ item.Abstract }}
								</p>
								<div class="acadecont_bottom">
									<div class="acadecont_bottom_left">
										<span>{{ item.AddDate.substr(0, 10) }}</span>
										<span>{{ item.organization }}</span>
									</div>
									<!-- <div class="acadecont_bottom_right">
                              <div>下载</div>
                              <div>查看</div>
                            </div>-->
								</div>
							</li>
							<pagepagination :total="page.total" :pageSize="page.pageSize"
								:currentPage="page.currentPage" @change="change" :numAround="true"></pagepagination>
						</ul>
						<div style="clear: both"></div>
					</div>
					<div v-show="searchcode === 4">
						<ul v-if="!disCaseList" class="zwData">
							<div class="zwIcon">
								<i class="iconfont icon-wusousuojieguo"></i>
							</div>
							<div class="zwSpan">
								<p>抱歉，暂时没有找到相关内容</p>
								<p>建议您检查关键词后，重新输入</p>
							</div>
						</ul>
						<ul class="searchCont_cluster_left_academic" v-else>
							<li v-for="(item, index) in disCaseList" :key="index"
								:class="{ acadecontNav: acadecontNav === index }" @click="acadecontNav = index">
								<div class="acadecont_title">
									<p>
										<a @click="loogin(item.ContentId)" v-html="item.Title"></a>
									</p>
									<p style="margin-top: 10px; color: #8b8b8b; font-size: 14px">
										{{ item.Authors }}
									</p>
								</div>
								<div class="acadecont_author">{{ item.author }}</div>
								<div class="acadecont_title_right">
									<!-- <div v-for="(itemc,index) in item.KeyWords.split(';')" :key="index">{{itemc}}</div> -->
									<!-- <div
                              v-for="(itemc, index) in item.KeyWords.split(';')"
                              :key="index"
                            >
                              {{ itemc }}
                            </div> -->
								</div>
								<div class="acadecont_open_zy">摘要</div>
								<p class="acadecont_cont" style="
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;
                            ">
									{{ item.Abstract }}
								</p>
								<div class="acadecont_bottom">
									<div class="acadecont_bottom_left">
										<span>{{ item.AddDate.substr(0, 10) }}</span>
										<span>{{ item.organization }}</span>
									</div>
									<!-- <div class="acadecont_bottom_right">
                              <div>下载</div>
                              <div>查看</div>
                            </div>-->
								</div>
							</li>
							<pagepagination :total="page.total" :pageSize="page.pageSize"
								:currentPage="page.currentPage" @change="change" :numAround="true"></pagepagination>
						</ul>
						<div style="clear: both"></div>
					</div>
				</div>
				<div style="clear:both"></div>
			</div>
		</div>
		<Alerts :flag="flag" @comfig="comfig"></Alerts>
	</div>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {
				flag: false,
				searchCont: 0,
				searchcode: 0,
				acadecontNav: "",
				liConHeight: 0,
				medianav: "",
				meetingnav: "",
				disCasenav: "",
				search: {
					title: "【光学学报 2019年第6期】由动态Stark效应诱导的氢原子涡旋动量分布",
					date: "2019-12-5",
					issuer: "xxx杂志",
					read: "293"
				},
				searchList: [{
						num: "issue",
						title: "学术文章"
					},
					{
						num: "media",
						title: "新媒体"
					},
					{
						num: "meeting",
						title: "会议培训"
					},
					{
						num: "",
						title: "病例案例"
					}
				],
				openFlag: false,
				acadecontList: [],
				periodiContList: [],
				meetContList: [],
				disCaseList: [],
				typeB: "",
				indexB: "",
				page: {
					currentPage: 0,
					pageSize: 10,
					total: 0
				}
			};
		},
		methods: {
			comfig(type) {
				this.flag = false;
				if (type) {
					this.$uniRouter.push({
						path: "/login",
					});
				}
			},
			open(item, i) {
				const liCon = this.$refs.liCon[i];
				var height = liCon.offsetHeight;
				if (height === this.liConHeight) {
					// 展开
					liCon.style.height = "auto";
					height = liCon.offsetHeight;
					liCon.style.height = this.liConHeight + "px";
					var f = document.body.offsetHeight; // 必加
					liCon.style.height = height + "px";
				} else {
					// 收缩
					liCon.style.height = this.liConHeight + "px";
				}
				if (!item.openFlag) {
					this.$set(item, "openFlag", true);
				} else {
					this.$set(item, "openFlag", false);
				}
			},
			// 新媒体点击跳转链接
			mediadetail(url) {
				let userName = this.$sessionStorage.getItem("userName");
				if (userName) {
					window.open(url);
				} else {
					this.flag=true
				// 	this.$confirm("请先登录", "提示", {
				// 			customClass: "message-logout",
				// 			confirmButtonText: "确定",
				// 			cancelButtonText: "取消"
				// 			// type: 'warning'
				// 		})
				// 		.then(() => {
				// 			this.$uniRouter.push({
				// 				path: "/login"
				// 			});
				// 		})
				// 		.catch(e => {});
				}
			},
			getInfo() {
				this.page.currentPage = 1;
				this.getTableData("issue", 1);
			},
			getTableData(type, index, ChannelId) {
				if (index == 2) {
					ChannelId = 3623
				}
				if (index == 3) {
					ChannelId = 3626
				}
				this.page.currentPage = 1
				this.searchcode = index;
				this.typeB = type;
				this.indexB = index;
				this.$httphelper.post("/api/Lm/HomeSearching", {
						Type: type,
						ChannelId: parseInt(ChannelId) || '',
						whereName: this.$uniRoute().whereName,
						PageIndex: this.page.currentPage,
						PageSize: this.page.pageSize,
					})
					.then(res => {
						if (type === "issue") {
							this.acadecontList = res.data.data;
							this.page.total = res.data.totalcount;
							this.acadecontList.forEach(item => {
								item.AddDate = item.AddDate.substr(0, 10);
								var str = item.KeyWords.indexOf("；");
								if ((str == -1)) {
									//将分号转为逗号
									var str2 = item.KeyWords.replace("；", ";");
								} else if (str != -1) {}
							});

						} else if (type === "news") {
							this.meetContList = res.data.data;
							this.page.total = res.data.totalcount;
							this.meetContList.forEach(item => {
								item.CreatedTime = item.CreatedTime.substr(0, 10);
							});
						} else if (type === "meeting") {
							this.disCaseList = res.data.data;
							this.page.total = res.data.totalcount;
							this.disCaseList.forEach(item => {
								item.CreatedTime = item.CreatedTime.substr(0, 10);
							});
						}
					})
			},
			loogin(id) {
				console.log(id,'大大驱蚊器翁')
				let userName = this.$sessionStorage.getItem("userName");
				if (userName) {
					this.$uniRouter.push({
						path: "/academic/academicdetail",
						query: {
							id: id
						}
					});
				} else {
					this.flag=true
				// 	this.$confirm("请先登录", "提示", {
				// 			customClass: "message-logout",
				// 			confirmButtonText: "确定",
				// 			cancelButtonText: "取消"
				// 			// type: 'warning'
				// 		})
				// 		.then(() => {
				// 			this.$uniRouter.push({
				// 				path: "/login"
				// 			});
				// 		})
				}
			},
			change(val) {
				this.page.currentPage = val;
				this.getTableData(this.typeB, this.indexB);
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			}
		},
		watch: {
			//监听相同路由下参数变化的时候，从而实现异步刷新
			$route(to, from) {
				//做一些路由变化的响应
				//打开加载动画
				this.loading = true;
				//重新获取数据
				this.getInfo();
				/** 初始化其他数据 */
			}
		},
		onLoad() {
			this.getInfo();
		}
	};
</script>

<style lang="less" scoped>
	#search {
		/deep/.el-pagination__total {
			display: none;
		}

		/deep/.el-pagination__sizes {
			display: none;
		}

		width: 100%;

		.searchCont {
			width: 100%;
			height: 100%;
			display: inline-block;

			.searchCont_cluster {
				width: 1140px;
				height: 100%;
				margin: 0 auto;
				margin-top: 28px;

				.searchCont_cluster_Left {
					width: 856px;
					height: auto;
					position: relative;
					float: left;

					.zwData {
						width: 635px;
						height: 100%;
						float: right;

						.zwIcon {
							width: 81px;
							height: 84px;
							float: left;

							i {
								color: #003c80;
								font-size: 77px;
								position: relative;
								top: -15px;
							}
						}

						.zwSpan {
							width: 350px;
							height: 60px;
							margin-left: 24px;

							p:nth-child(1) {
								color: #003c80;
								font-size: 22px;
							}

							p:nth-child(2) {
								color: #000000;
								font-size: 16px;
								margin-top: 10px;
							}
						}
					}

					.searchCont_cluster_left_nav {
						width: 208px;
						height: 134px;
						border: 1px solid #e4e4e4;
						float: left;

						li {
							list-style: none;
							width: 100%;
							height: 33px;
							line-height: 33px;
							text-align: center;
							color: #000;
							font-size: 14px;
							cursor: pointer;
						}

						.searchcode {
							background: #003c80;
							color: #fff;
						}
					}

					.searchCont_cluster_left_academic {
						width: 635px;
						height: 100%;
						float: right;

						.acadecontNav {
							background: #f7f8fa;

							.acadecont_title {
								p {
									a {
										color: #003c80;
									}
								}
							}
						}

						li:hover {
							background: #f7f8fa;

							.acadecont_title {
								p {
									a {
										color: #003c80;
									}
								}
							}

							.acadecont_title_right {
								div {
									background: #003c80;
								}
							}
						}

						li {
							list-style: none;
							width: 96%;
							height: auto;
							margin-right: 44px;
							cursor: pointer;
							padding: 23px 13px;
							background: #fff;
							border-bottom: 1px solid #e6e6e6;

							.acadecont_title {
								width: 100%;
								height: 25px;

								p {
									font-size: 18px;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									white-space: nowrap;

									a {
										color: #003c80;
									}
								}
							}

							.acadecont_title_right {
								width: 100%;
								margin-top: 18px;

								div {
									display: inline-block;
									margin-right: 21px;
									padding-left: 10px;
									padding-right: 10px;
									background: #c0c0c0;
									color: #fff;
									font-size: 14x;
									text-align: center;
									line-height: 22px;
									border-radius: 5px;
									margin-bottom: 10px;
								}
							}

							.acadecont_author {
								width: 100%;
								margin-top: 30rpx;

								height: 30rpx;
								color: #8b8b8b;
								font-size: 28rpx;
								word-spacing: 22rpx;
							}

							.acadecont_open_zy {
								width: 58px;
								height: 25px;
								border-radius: 5px;
								background: #003c80;
								color: #fff;
								font-size: 16px;
								text-align: center;
								line-height: 25px;
								margin-top: 17px;
							}

							.acadecont_cont {
								width: 100%;
								color: #8b8b8b;
								font-size: 14px;
								// height:0px;
								overflow: hidden;
								transition: height 0.3s;
								margin-top: 16px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								line-clamp: 3;
								/* autoprefixer: off */
								-webkit-box-orient: vertical;
								/* autoprefixer: on */
							}

							.acadecont_bottom {
								width: 100%;
								height: 25px;
								margin-top: 21px;

								.acadecont_bottom_left {
									float: left;

									span:nth-child(1) {
										color: #909090;
										font-size: 16px;
										margin-right: 45px;
									}

									span:nth-child(2) {
										color: #8b8b8b;
										font-size: 14px;
									}
								}

								.acadecont_bottom_right {
									float: right;

									div:nth-child(1) {
										background: #003c80;
									}

									div {
										float: left;
										width: 58px;
										height: 25px;
										background: #c0c0c0;
										border-radius: 5px;
										font-size: 16px;
										color: #fff;
										margin-right: 32px;
										text-align: center;
										line-height: 25px;
									}
								}
							}
						}
					}

					.searchCont_cluster_left_media {
						width: 635px;
						height: 100%;
						float: right;

						.medianav {
							background: #f7f8fa;

							.periodiCon_cluster_Cont_right {
								p:nth-child(1) {
									a {
										color: #003c80;
									}
								}
							}

							.periodiCon_cluster_cover {
								display: none;
							}
						}

						li:hover {
							background: #f7f8fa;

							.periodiCon_cluster_Cont_right {
								p:nth-child(1) {
									color: #003c80;

									a {
										color: #003c80;

										/deep/p {
											color: #003c80;
										}
									}
								}
							}

							.periodiCon_cluster_cover {
								display: none;
							}
						}

						li {
							list-style: none;
							width: 100%;
							height: auto;
							float: left;
							margin-right: 44px;
							cursor: pointer;
							padding: 15px 9px;
							background: #fff;
							border-bottom: 1px solid #e6e6e6;

							.periodiCon_cluster_Cont_img {
								width: 175px;
								height: 120px;
								float: left;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.periodiCon_cluster_cover {
								width: 175px;
								height: 120px;
								float: left;
								background: linear-gradient(0deg,
										rgba(0, 0, 0, 0.6) 0%,
										rgba(0, 0, 0, 0.3) 100%);
								position: relative;

								i {
									color: #fff;
									font-size: 32px;
									position: relative;
									left: 50%;
									margin-left: -18px;
									line-height: 120px;
								}
							}

							.periodiCon_cluster_Cont_right {
								width: 423px;
								float: right;

								p:nth-child(1) {
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									/* autoprefixer: off */
									-webkit-box-orient: vertical;

									/* autoprefixer: on */
									a {
										color: #333333;
										font-size: 16px;
									}
								}

								// p:nth-child(2){
								//   width: 100%;
								//   overflow: hidden;
								//   text-overflow: ellipsis;
								//   display: -webkit-box;
								//   -webkit-line-clamp: 3;
								//   line-clamp: 3;
								//   /* autoprefixer: off */
								-webkit-box-orient: vertical;

								/* autoprefixer: on */
								//   color: #8B8B8B;
								//   font-size:14px;
								//   margin-top:7px;
								//   text-align:justify;
								// }
								p:nth-child(2) {
									width: 100%;
									height: 15px;
									margin-top: 69px;

									span:nth-child(1) {
										color: #909090;
										font-size: 14px;
										float: left;
									}

									span:nth-child(2) a {
										color: #909090;
										font-size: 16px;
										float: right;
									}
								}
							}
						}
					}

					.searchCont_cluster_left_meeting {
						width: 635px;
						height: 100%;
						float: right;

						.meetingnav {
							background: #f7f8fa;

							.periodiCon_cluster_Cont_right {
								p:nth-child(1) {
									a {
										color: #003c80;
									}
								}
							}

							.periodiCon_cluster_cover {
								display: none;
							}
						}

						li:hover {
							background: #f7f8fa;

							p:nth-child(1) a {
								color: #003c80;
							}

							div {
								span {
									background: #003c80;
								}
							}
						}

						li {
							list-style: none;
							width: 100%;
							height: auto;
							float: left;
							margin-right: 44px;
							cursor: pointer;
							padding: 18px 16px 17px 16px;
							background: #fff;
							border-bottom: 1px solid #e6e6e6;

							p:nth-child(1) {
								color: #003c80;
								font-size: 18px;
								font-weight: bold;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								line-clamp: 1;
								/* autoprefixer: off */
								-webkit-box-orient: vertical;
								/* autoprefixer: on */
								width: 100%;

								a {
									color: #003c80;
								}
							}

							p:nth-child(2) {
								margin-top: 13px;
								color: #8b8b8b;
								font-size: 14px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								/* autoprefixer: off */
								-webkit-box-orient: vertical;
								/* autoprefixer: on */
								width: 100%;
							}

							div {
								width: 100%;
								height: 22px;
								margin-top: 15px;

								span {
									float: left;
									width: 68px;
									height: 22px;
									background: #c0c0c0;
									border-radius: 5px;
									color: #fff;
									font-size: 14px;
									line-height: 22px;
									text-align: center;
									margin-right: 21px;
								}
							}

							p:nth-child(4) {
								color: #8b8b8b;
								font-size: 14px;
								margin-top: 15px;
							}
						}
					}

					.searchCont_cluster_left_disCase {
						width: 635px;
						height: 100%;
						float: right;

						.disCasenav {
							background: #f7f8fa;

							.periodiCon_cluster_Cont_right {
								p:nth-child(1) {
									a {
										color: #003c80;
									}
								}
							}

							.periodiCon_cluster_cover {
								display: none;
							}
						}

						li:hover {
							background: #f7f8fa;

							.periodiCon_cluster_Cont_right {
								p:nth-child(1) {
									color: #003c80;

									a {
										color: #003c80;

										/deep/p {
											color: #003c80;
										}
									}
								}
							}

							.periodiCon_cluster_cover {
								display: none;
							}
						}

						li {
							list-style: none;
							width: 100%;
							height: auto;
							float: left;
							margin-right: 88rpx;
							cursor: pointer;
							margin-top: 30rpx;
							padding: 30rpx 18rpx;
							background: #fff;
							border-bottom: 1px solid #e6e6e6;

							.periodiCon_cluster_Cont_img {
								width: 175px;
								height: 120px;
								float: left;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.periodiCon_cluster_cover {
								width: 175px;
								height: 120px;
								float: left;
								background: linear-gradient(0deg,
										rgba(0, 0, 0, 0.6) 0%,
										rgba(0, 0, 0, 0.3) 100%);
								position: absolute;

								i {
									color: #fff;
									font-size: 32px;
									position: relative;
									left: 50%;
									margin-left: -18px;
									line-height: 120px;
								}
							}

							.periodiCon_cluster_Cont_right {
								width: 432px;
								float: right;

								p:nth-child(1) {
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									line-clamp: 1;
									/* autoprefixer: off */
									-webkit-box-orient: vertical;

									/* autoprefixer: on */
									/deep/a {
										color: #333333 !important;
										font-size: 16px !important;

										p {
											/deep/span {
												font-size: 16px !important;
												color: #333;
												font-weight: 400 !important;

												strong {
													font-weight: 400 !important;
												}
											}
										}

										h2 {
											color: #333333 !important;
											font-size: 16px !important;
											font-weight: 400;
										}
									}
								}

								p:nth-child(2) {
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									line-clamp: 3;
									/* autoprefixer: off */
									-webkit-box-orient: vertical;
									/* autoprefixer: on */
									color: #8b8b8b;
									font-size: 14px;
									margin-top: 7px;
									text-align: justify;
								}

								p:nth-child(3) {
									width: 100%;
									height: 15px;
									margin-top: 9px;

									span:nth-child(1) {
										color: #909090;
										font-size: 14px;
										float: left;
									}

									span:nth-child(2) a {
										color: #909090;
										font-size: 16px;
										float: right;
									}
								}
							}
						}
					}
				}

				.searchCont_cluster_Right {
					width: 265px;
					float: right;
					border-left: 1px solid #eeeeee;
					position: relative;

					.just_cluster_righ_img {
						margin-left: 19px;
						margin-top: 28px;
						width: 250px;
						height: 163px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.grid-content {
		border-radius: 4px;
		min-height: 32px;
		line-height: 32px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/.el-col-3 {
		width: 12.5%;
		text-align: left;
	}

	/deep/.el-col-21 {
		width: 87.5%;
	}

	/deep/.el-pagination {
		width: 100%;
		position: relative;
		bottom: -46px;
		text-align: center;
		overflow: hidden;
		overflow-x: auto;
	}

	@media screen and (max-width: 1010px) {

		/deep/.el-pagination__sizes {
			display: none !important;
		}

		.academicCont_cluster_ContB {
			width: 100%;
			margin-top: 30rpx;
			overflow: hidden;
			overflow-x: auto;

			ul {
				width: 143% !important;
				height: 64rpx !important;
				position: relative;
				border: none !important;
				float: none !important;

				.searchcode {
					background: #003c80;
					color: #fff;
				}

				li {
					list-style: none;
					float: left !important;
					width: 17% !important;
					height: 64rpx !important;
					line-height: 64rpx !important;
					text-align: center !important;
					margin-right: 60rpx !important;
					font-size: 30rpx !important;
				}
			}
		}

		.academicCont_cluster_ContB::-webkit-scrollbar {
			display: none;
		}

		#mofootBase {
			margin-top: 240rpx !important;
		}

		.searchCont {
			width: 100% !important;
			margin: 0 auto;
			position: relative;
			top: 80rpx;
		}

		.searchCont_cluster {
			width: 100% !important;
			margin: 0 auto;
			margin-top: 36rpx !important;

			.searchCont_cluster_Left {
				width: 94% !important;
				margin: 0 auto;
				float: none !important;

				.searchCont_cluster_left_academic {
					width: 100% !important;
					margin: 0 auto;

					.acadecont_title_right {
						height: auto !important;

						div {
							float: none !important;
							display: inline-block !important;
							height: auto !important;
						}
					}

					.acadecont_bottom {
						margin-top: 26rpx !important;
						height: auto !important;
						position: relative;

						.acadecont_bottom_left {
							float: none !important;
						}

						.acadecont_bottom_right {
							float: none !important;
							margin-top: 26rpx !important;

							div {
								float: none !important;
							}

							div:nth-child(2) {
								position: relative;
								left: 142rpx;
								top: -50rpx;
							}
						}
					}
				}
			}

			.searchCont_cluster_Right {
				display: none;
			}
		}

		.zwData {
			width: 100% !important;
			margin-top: 32rpx;
		}

		.zwSpan {
			width: 95% !important;
		}

		.searchCont_cluster_left_media {
			width: 100% !important;
			margin: 0 auto;

			.periodiCon_cluster_cover {
				display: none;
			}

			.periodiCon_cluster_Cont_img {
				width: 100% !important;
				height: 100% !important;
				float: none !important;
			}

			.periodiCon_cluster_Cont_right {
				float: none !important;
				width: 100% !important;

				p:nth-child(3) {
					height: 21px !important;
				}
			}
		}

		.searchCont_cluster_left_disCase {
			width: 100% !important;

			.periodiCon_cluster_Cont_img {
				width: 100% !important;
				height: 100% !important;
			}

			.periodiCon_cluster_cover {
				display: none;
			}

			.periodiCon_cluster_Cont_right {
				width: 100% !important;
				float: none !important;
			}
		}
	}
</style>
<style>
	@media screen and (max-width: 1010px) {
		.message-logout {
			width: 80% !important;
		}
	}
</style>
